<template>
    <div class="write">
        <MdEditor v-model="form.content" :placeholder="component.placeholder" :toolbars="toolbars"
            :tableShape="data.tableShape" :onSave="onSave" :onUploadImg="onUploadImg"
            :showCodeRowNumber="data.showCodeRowNumber">
            <template #defToolbars>
                <NormalToolbar title="小提示" @onClick="onTip">
                    <template #trigger>
                        <svg-icon name="tip"></svg-icon>
                    </template>
                </NormalToolbar>
                <NormalToolbar title="" @onClick="onTip">
                    <template #trigger>
                        <svg-icon name="tip"></svg-icon>
                    </template>
                </NormalToolbar>
            </template>
        </MdEditor>
    </div>
</template>

<script setup lang="ts">
import { MdEditor, NormalToolbar } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { useMDEditor } from '@/hooks/useMDEditor';
import { computed } from 'vue';
import { components } from '@/store'

const component = computed(() => components.useWriteStore().component)
const data = computed(() => components.useWriteStore().data)
const form = computed(() => components.useWriteStore().form)

const onSave = components.useWriteStore()._onSave;
const onTip = components.useWriteStore()._onTip;
const onUploadImg = components.useWriteStore()._onUploadImg;
const { toolbars } = useMDEditor({
    lineNumber: data.value.lineNumber,
    renderDelay: data.value.renderDelay,
});


</script>

<style lang="less" scoped>
.write {
    padding-top: 90px;

    #md-editor-v3 {
        min-height: calc(100vh - 90px);
        .md-editor-toolbar-item {
            display: inline-flex;
            align-items: center;
        }
    }

}
</style>